<template>
  <div class="page-content">
    <div class="page-inner">
      <div>
        <el-form>
          <el-row :gutter="20">
            <!-- <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="订单号">
                <el-input
                  clearable
                  prefix-icon="Search"
                  v-model.trim="queryParams.sn"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="商品名称">
                <el-input
                  clearable
                  prefix-icon="Search"
                  v-model.trim="queryParams.goodsName"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col> -->
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="订单状态">
                <el-select
                  v-model="queryParams.orderStatus"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option :label="item.label" :value="item.value" v-for="item in orderStatusList" :key="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <el-button type="primary" icon="Search" @click="SrarchList"
                >搜索</el-button
              >
              <el-button icon="Refresh" @click="handleReset">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <el-table
        :data="dataList"
        v-loading="loading"
        ref="table"
        style="margin-top: 20px"
      >
      <el-table-column label="#" type="index" align="left" />
        <el-table-column label="订单信息" align="left" min-width="150px">
          <template #default="scope">
            <div style="display: flex; flex-direction: column;">
              <span style="font-weight: bold;" :style="{color:orderStatusList.find(item=>item.value===scope.row.orderStatus)?.color}">
                {{ orderStatusList.find(item=>item.value===scope.row.orderStatus)?.label }}
              </span>
              <span><span>订单号：</span> <span>{{ scope.row.sn || '--' }}</span></span>
              <span><span>成本价：</span> <span>{{ scope.row.costPrice ?? '--' }}</span></span>
              <!-- <span><span>总价：</span> <span>{{ scope.row.flowPrice ?? '--' }}</span></span> -->
            </div>
          </template>
        </el-table-column>
        <el-table-column label="商品信息" align="left" min-width="150px">
          <template #default="scope">
            <div style="display: flex; justify-content: flex-start;align-items: center;">
              <ImagePreview
                :src="scope.row.goodsCover"
                width="60px"
                height="60px"
              /> 
              <div style="display: flex; flex-direction: column; justify-content: space-between; align-items: start; margin-left: 10px;">
                <span class="context">{{ scope.row.goodsName ?? '--' }}</span>
                <!-- <span>SN: {{ scope.row.goodsSn ?? '--' }}</span> -->
                <span>
                  <span style="font-weight: bolder;;margin-right: 15px;">￥{{ scope.row.goodsPrice ?? '--' }}</span>
                  <span v-show="scope.row.goodsNum" style="font-weight: bold;color: #f44747;">×{{ scope.row.goodsNum }}</span>
                </span>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="订单信息" align="left" min-width="150px">
          <template #default="scope">
            <div style="display: flex; flex-direction: column;">
              <span v-if="scope.row.createTime"><span>创建时间：</span> <span>{{ scope.row.createTime || '--' }}</span></span>
              <span v-if="scope.row.completeTime"><span>完成时间：</span> <span>{{ scope.row.completeTime || '--' }}</span></span>
              <span><span class="label">快递公司：</span> <span>{{ scope.row.expressCompany || '--' }}</span></span>
              <span><span class="label">快递单号：</span> <span>{{ scope.row.expressNo || '--' }}</span></span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="收件人信息" align="left" min-width="150px">
          <template #default="scope">
            <div style="display: flex; flex-direction: column;">
              
              <span><span class="label">收件人姓名：</span> <span>{{ scope.row.contactsName || '--' }}</span></span>
              <span><span class="label">联系方式：</span> <span>{{ scope.row.contactsMobile || '--' }}</span></span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="其他信息" align="left" min-width="150px">
          <template #default="scope">
            <div style="display: flex; flex-direction: column;">
              
              <span><span class="label">省市区：</span> <span>{{ scope.row.contactsAddress || '--' }}</span></span>
              <span><span class="label">详细地址：</span> <span>{{ scope.row.contactsDetail || '--' }}</span></span>
              <span><span class="label">积分：</span> <span>{{ scope.row.integral ?? '--' }}</span></span>
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" min-width="80px">
          <template #default="scope">
            <div >
              <!-- <el-button
                type="danger"
                size="small"
                icon="Delete"
                @click="handleDel(scope.row)"
                >删除</el-button
              > -->
              <el-button
                type="primary"
                size="small"
                icon="Edit"
                @click="proxy.$refs.sendRef.init('edit', scope.row)"
                v-if="scope.row.orderStatus=='UNDELIVER'"
                >发货</el-button
              >
              <span v-else>--</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        v-show="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        :total="total"
        @pagination="getList"
      />
    </div>
    <Send ref="sendRef" @success="success" v-if="!loading" />
  </div>
</template>
<script setup>
import Send from './Send'
import { listPage, info, sendApi } from '@/api/order/integrail.js'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getCurrentInstance, onBeforeMount, ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const { proxy } = getCurrentInstance() //proxy
const loading = ref(false)
const orderStatusList = [
  {label:'待发货', value:'UNDELIVER', color:'orange'},
  {label:'已完成', value:'COMPLETE', color:'#0dbc79'},
]
const dataList = ref([]) //优惠券列表数据
const total = ref(0)
const queryParams = ref({
  pageSize: 10,
  pageNum: 1,
  couponName: '',
  status: ''
})
onBeforeMount(() => {
  getList()
})

//获取列表数据
const getList = () => {
  loading.value = true
  let query = {
    ...queryParams.value
  }
  listPage(query)
    .then(res => {
      dataList.value = res.data.list
      total.value = res.data.total
      loading.value = false
    })
    .catch(err => {
      loading.value = false
      ElMessage.error(err.message || `${text}失败`)
    })
}

const success = () => {
  queryParams.value.pageNum = 10
  queryParams.value.pageNum = 1,
  getList()
}

//搜索
const SrarchList = () => {
  getList()
}

// 重置
const handleReset = () => {
   queryParams.value = {
    pageNum: 1,
    pageSize: 10
   }
   getList()
}

const handleChangeStatus = row => {
  console.log('row.status', row.status)
  changeStatusApi(row).then(res => {
      ElMessage.success('操作成功')
      getList()
    })
    .catch(() => {
      getList()
    })
};

// 删除
const handleDel = row => {
  ElMessageBox.confirm(`此操作将永远删除该数据,是否继续?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    let id = row.id
    del({ id })
      .then(res => {
        ElMessage.success(`删除成功`)
        getList()
      })
      .catch(err => {
        loading.value = false
        ElMessage.error(`删除失败`)
      })
  })
}
</script>
<script>
export default {
  // name: "store_admin",
}
</script>
<style lang="scss" scoped>
.page-content {
  width: 100%;
  height: 100%;
  .page-inner {
    padding: 20px 15px;
  }
}
.label{
  font-weight: bold
}
</style>
